<template>
  <div>
    <!-- 面包屑导航栏 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>发布商品</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 进度条 -->
    <el-steps :active="currentStep" finish-status="success" style="margin-bottom: 20px;">
      <el-step title="选择商品"></el-step>
      <el-step title="填写商品详情"></el-step>
      <el-step title="发布成功"></el-step>
    </el-steps>

    <!-- 步骤内容 -->
    <div v-if="currentStep === 0">
      <!-- 第一步：选择商品 -->
      <el-form :model="selectedCategory" class="step-form">
        <el-form-item label="选择商品分类" required>
          <el-select v-model="selectedCategory.categoryId" placeholder="请选择商品分类">
            <el-option
              v-for="category in categories"
              :key="category.id"
              :label="category.name"
              :value="category.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="goToNextStep">下一步</el-button>
      </el-form>
    </div>

    <div v-else-if="currentStep === 1">
      <!-- 第二步：填写商品详情 -->
      <el-card class="product-publish-card">
        <div class="form-container">
          <el-form
            :model="productDetails"
            :rules="productRules"
            ref="productFormRef"
            label-width="120px"
            class="product-form"
          >
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="productDetails.name" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品描述" prop="description">
              <el-input
                type="textarea"
                v-model="productDetails.description"
                placeholder="请输入商品描述"
                rows="4"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
              <el-input-number
                v-model="productDetails.price"
                controls-position="right"
                :min="0.01"
                step="0.01"
                precision="2"
                placeholder="请输入商品价格"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="促销价格" prop="promotionPrice">
              <el-input-number
                v-model="productDetails.promotionPrice"
                controls-position="right"
                :min="0"
                step="0.01"
                precision="2"
                placeholder="请输入促销价格"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="库存数量" prop="stock">
              <el-input-number
                v-model="productDetails.stock"
                controls-position="right"
                :min="0"
                step="1"
                placeholder="请输入库存数量"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="库存警告数量" prop="warningStock">
              <el-input-number
                v-model="productDetails.warningStock"
                controls-position="right"
                :min="0"
                step="1"
                placeholder="请输入库存警告数量"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="商品主图URL" prop="mainImageUrl">
              <el-input v-model="productDetails.mainImageUrl" placeholder="请输入商品主图URL"></el-input>
            </el-form-item>
            <el-form-item label="商品附加图URL列表" prop="additionalImages">
              <el-input
                type="textarea"
                v-model="productDetails.additionalImages"
                placeholder="每行一个URL"
                rows="4"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品分类ID" prop="categoryId">
              <el-input v-model="productDetails.categoryId" placeholder="请输入商品分类ID"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="goToPreviousStep">上一步</el-button>
              <el-button type="primary" @click="publishProduct">发布商品</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>

    <div v-else-if="currentStep === 2">
      <!-- 第三步：商品发布成功 -->
      <div class="success-message">
        <el-icon>
          <success-icon />
        </el-icon>
        <h2>商品发布成功！</h2>
        <el-button type="primary" @click="goToFirstStep">返回首页</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox, ElCard, ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption, ElInputNumber, ElIcon } from 'element-plus';

// 当前步骤
const currentStep = ref(0);

// 商品分类数据
const categories = ref([
  { id: 1, name: '电子产品' },
  { id: 2, name: '家用电器' },
  { id: 3, name: '服饰鞋帽' }
]);

// 选择的分类
const selectedCategory = ref({
  categoryId: ''
});

// 商品详情
const productDetails = ref({
  name: '',
  description: '',
  price: null,
  promotionPrice: null,
  stock: null,
  warningStock: null,
  mainImageUrl: '',
  additionalImages: '',
  categoryId: ''
});

// 商品详情验证规则
const productRules = reactive({
  name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
  price: [{ required: true, message: '商品价格不能为空', trigger: 'blur' }],
  categoryId: [{ required: true, message: '商品分类ID不能为空', trigger: 'blur' }],
});

// 转到下一步
const goToNextStep = () => {
  if (selectedCategory.value.categoryId) {
    currentStep.value += 1;
  } else {
    ElMessage.warning('请先选择商品分类');
  }
};

// 转到上一步
const goToPreviousStep = () => {
  currentStep.value -= 1;
};

// 发布商品
const publishProduct = () => {
  if (validateProductDetails()) {
    // 这里可以添加发布商品的逻辑
    ElMessage.success('商品发布成功！');
    currentStep.value += 1;
  } else {
    ElMessage.warning('请填写完整的商品信息');
  }
};

// 验证商品详情
const validateProductDetails = () => {
  return productDetails.value.name && productDetails.value.price !== null && productDetails.value.categoryId;
};

// 返回首页
const goToFirstStep = () => {
  currentStep.value = 0;
};
</script>
<style scoped>
.step-form {
  margin-top: 20px;
}

.success-message {
  text-align: center;
  margin-top: 50px;
}

.success-message h2 {
  margin-top: 20px;
}

.el-steps {
  margin-bottom: 20px;
}

.el-button {
  margin-top: 20px;
}

.product-publish-card {
  max-width: 600px;
  margin: 30px auto;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #ffffff;
}

.form-container {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.product-form {
  width: 100%;
}

.el-form-item__content {
  display: flex;
  align-items: center;
}

.el-input[type="textarea"] {
  resize: none;
}

.el-upload-list__item-actions {
  position: relative;
}

.el-upload-list__item-delete {
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 5px;
  height: 20px;
  width: 20px;
  text-align: center;
  line-height: 18px;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  background-color: #f56c6c;
}

.el-button {
  margin-right: 10px;
}
</style>
